<template>
  <div class="h5-house">
    <div class="box">
      <img src="@/img/img.png" alt="" />
      <div class="small">
        <img src="@/img/avatar.png" alt="" />
        <span class="icon">游客</span>
        <button @click="$router.push('/login')">去登录</button>
      </div>
    </div>
    <div class="TEXT">
      <van-grid :column-num="3" :gutter="20" :border="false">
        <van-grid-item icon="star-o" text="我的收藏" @click="$router.push('/login')"/>
        <van-grid-item icon="wap-home-o" text="我的出租" @click="$router.push('/login')"/>
        <van-grid-item icon="clock-o" text="看房记录" @click="$router.push('/login')"/>
        <van-grid-item icon="photo-o" text="成为房主" @click="$router.push('/login')"/>
        <van-grid-item icon="contact" text="个人资料" @click="$router.push('/login')"/>
        <van-grid-item icon="service-o" text="联系我们" @click="$router.push('/login')"/>
      </van-grid>
    </div>
    <div class="footer">
      <img src="@/img/join.png" alt="" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'Own',

  props: {},
  components: {},
  data () {
    return {}
  },
  methods: {}
}
</script>

<style scoped lang="less">
.box {
  display: flex;
  position: relative;
  height: 200px;
  // background-color: pink;
}
img {
  width: 100%;
  height: 100%;
}
.small {
  position: absolute;
  bottom: -100px;
  right: 30px;
  margin: 0 auto;
  width: 340px;
  height: 180px;
  background-color: #fff;
  box-shadow: 0 2px 2px #bdbdbd;
}
.small button {
  width: 80px;
  height: 30px;
  margin-left: 40%;
  margin-top: 100px;
  background-color: #21b97a;
  color: white;
  border: none;
  border-radius: 5px;
  box-shadow: 0 2px 2px #bdbdbd;
}
.small button:hover {
  color: #53cda2;
}

.small img {
  width: 70px;
  height: 70px;
  position: absolute;
  left: 40%;
  top: -35px;
  border-radius: 50%;
  border: 8px solid #f5f5f5;
}

.TEXT {
  position: absolute;
  left: 0%;
  top: 320px;
}
.icon {
  position: absolute;
  left: 47%;
  top: 60px;
}

.footer img {
  width: 90%;
  height: 100px;
  position: absolute;
  left: 5%;
  top: 530px;
}
</style>
